<template>
  <div class="card-type">
    <div class="card-type-inside">
      <div class="header">
        <div class="left item">
          <img
              alt="左侧"
              src="@/components/assets/images/design/1-12.webp"
          />
        </div>
        <div class="middle item">请点击下方卡片选择验证方式</div>
        <div class="right item">
          <img
              alt="右侧"
              src="@/components/assets/images/design/1-12.webp"
          />
        </div>
      </div>
      <el-row :gutter="32" class="patient-number-area">
        <template v-for="item in cardTypeOptions">
          <template v-if="item.span===12">
            <el-col class="biz-item" :span="item.span" >
              <div class="biz-item-inside" :class="item.className">
                <div class="info-wrap" @click="handleActionType(item)">
                  <div class="type">
                    <template v-if="item.className==='social-security-card'">
                      <img
                          alt="卡片类型"
                          src="@/components/assets/images/design/1-32×2.png"
                      />
                    </template>
                    <template v-if="item.className==='medical-insurance'">
                      <img
                          alt="卡片类型"
                          src="@/components/assets/images/design/1-33×2.png"
                      />
                    </template>
                  </div>
                  <div class="name">{{ item.name }}</div>
                </div>
              </div>
            </el-col>
          </template>
          <template v-if="item.span===24">
            <el-col class="biz-item" :span="item.span">
              <div
                  class="biz-item-inside"
                  :class="item.className"
              >
                <div class="info-wrap" @click="handleActionType(item)">
                  <div class="type">
                    <img
                        alt="卡片类型"
                        src="@/components/assets/images/design/1-34×2.png"
                    />
                  </div>
                  <div class="name">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </el-col>
          </template>
        </template>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'CardType',

  componentName: "CardType",

  components: {},

  data() {
    return {}
  },

  computed: {
    cardTypeOptions(){
      return this.$store.getters['DRCbiz/getCardTypeOptions']
    },

    // 步骤
    stepInfo() {
      return this.$store.getters['DRCbiz/getStepsInfo']
    },
  },

  mounted() {},

  methods: {
    handleActionType(row = Object()) {
      let step = (this.stepInfo);
      Reflect.set(row,'cardNo','');
      this.$store.dispatch('DRCbiz/setCardTypeInfo',row);
      this.$store.dispatch('DRCbiz/setStepsInfo', ++step)
    }
  },
}

</script>

<style scoped lang="scss">
@import "./assets/style";
</style>